import { useState, useEffect } from "react"

function Button(props) {
    // 定义间隔检查时间
    var ind = null
    // 定义字体颜色
    var colors = ["gray", "red", "blue"];
    // 定义状态
    var texts = ["已过期", "秒杀中", "未开始"];
    // 定义下标
    const [status, setStatus] = useState(0);
    // 检查方法
    function check() {
        if (Date.now() < props.starTime) {
            setStatus(2)
        } else if (Date.now() > props.endTime) {
            setStatus(0)
            clearInterval(ind)
        } else {
            setStatus(1)
        }
    }

    useEffect(() => {
        check()
        ind = setInterval(check, 1000)
    }, [])

    return (<div>
        <button style={{
            color: colors[status]
        }}>
            {texts[status]}<br />
            {props.starTime.toLocaleString()} -- {props.endTime.toLocaleString()}
        </button>
    </div>);
}

export default Button;